import React,{Component,Fragment} from 'react'
import {Card} from 'antd'
import ReactEcharts from 'echarts-for-react'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

import echarts from 'echarts'
import theme from './../echartTheme.js'

echarts.registerTheme('echartTheme', theme);

export default class Pie extends Component {
    //饼形图表图一
    getOption = {
        title: {
            text: '用户骑行订单',
            left:'center',
            textStyle: {
                color: '#03A9F4'
            }
        },
        legend:{
            orient: 'vertical',
            data:['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            top:40,
            right:40
        },
        tooltip: {
            trigger:'item',
            formatter:'{a}<br/>{b}:{c}:({d}%)'//{b}<br/>订单量:{c}
        },
        series: [{
            name: '订单量',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:1000, name:'周一'},
                {value:2000, name:'周二'},
                {value:1500, name:'周三'},
                {value:3000, name:'周四'},
                {value:2000, name:'周五'},
                {value:1200, name:'周六'},
                {value:800, name:'周日'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    }
    //饼形图表图二
    getOption2 = {
        title: {
            text: '用户骑行订单',
            left:'center',
            textStyle: {
                color: '#03A9F4'
            }
        },
        legend:{
            orient: 'vertical',
            data:['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            top:40,
            right:40
        },
        tooltip: {
            trigger:'item',
            formatter:'{a}<br/>{b}:{c}:({d}%)'//{b}<br/>订单量:{c}
        },
        series: [{
            name: '订单量',
            type: 'pie',
            radius : ['55%','75%'],
            center: ['50%', '60%'],
            data:[
                {value:1000, name:'周一'},
                {value:2000, name:'周二'},
                {value:1500, name:'周三'},
                {value:3000, name:'周四'},
                {value:2000, name:'周五'},
                {value:1200, name:'周六'},
                {value:800, name:'周日'}
            ]
        }]
    }
    //饼形图表三
    getOption3 = {
        title: {
            text: '用户骑行订单',
            left:'center',
            textStyle: {
                color: '#03A9F4'
            }
        },
        legend:{
            orient: 'vertical',
            top:40,
            right:40,
            data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        tooltip: {
            trigger:'item',
            formatter:'{a}<br/>{b}:{c}:({d}%)'
        },
        series: [{
            name: '订单量',
            type: 'pie',
            radius : '55%',
            roseType : 'radius',
            center: ['50%', '60%'],
            data:[
                {value:1000, name:'周一'},
                {value:2000, name:'周二'},
                {value:1500, name:'周三'},
                {value:3000, name:'周四'},
                {value:2000, name:'周五'},
                {value:1200, name:'周六'},
                {value:800, name:'周日'}
            ].sort(function (a, b) { return a.value - b.value; })
        }]
    }
    render(){
        return (
            <Fragment>
                <Card title="饼形图表之一">
                    <ReactEcharts 
                        option={this.getOption}
                        style={{height:500}}
                        theme="echartTheme" 
                    />
                </Card>
                 <Card title="饼形图表之二" style={{marginTop:10}}>
                    <ReactEcharts 
                        option={this.getOption2}
                        style={{height:500}}
                        theme="echartTheme" 
                    />
                </Card>
                <Card title="饼形图表之三" style={{marginTop:10}}>
                    <ReactEcharts 
                        option={this.getOption3}
                        style={{height:500}}
                        theme="echartTheme" 
                    />
                </Card>
            </Fragment>
        )
    }
}